import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 【以此种方式导入时，需要在tsconfig.node.json添加compilerOptions对象属性添加"allowSyntheticDefaultImports": true】
// import AutoImport from 'unplugin-auto-import/vite'
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite' // 手动导入

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const { VITE_PROXY } = loadEnv(mode, process.cwd(), "");
  return {
    // 打包配置
    build: {
      target: 'modules',
      outDir: 'dist', // 指定输出路径
      assetsDir: 'assets', // 指定生成静态资源的存放路径
      minify: 'terser' // 混淆器，terser构建后文件体积更小
    },
    plugins: [
      vue(),
      // 额外配置了手动引入修改主题色，在代码中不引入ElMessage直接使用的话eslint会报错，引入的话主题色又会被覆盖，只能再配置手动引入的
      ElementPlus({ useSource: true}),
      // 自动引入element组件
      // AutoImport({
      //   resolvers: [ElementPlusResolver()]// 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
      // }),
      // Components({
      //   resolvers: [ElementPlusResolver()]// 自动引入修改主题色添加这一行，使用预处理样式
      // })
    ],
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'),
        '/@': path.join(__dirname, 'src')
      }
    },
    // 配置全局less、scss变量
    css: {
      preprocessorOptions: {
        scss: {
          // 引入element样式后，在引入其他全局变量时，要使用use
          additionalData: '@use "@/styles/element/index.scss";@use "@/styles/scss/index.scss" as *;' // 注意一定要加“分号”
        }
      }
    },
    server: {
      host: true,
      port: 3000,
      proxy: {
        '^/api': {
          target: VITE_PROXY, // 代理的目标地址
          changeOrigin: true, // 兼容基于名字的虚拟主机
          rewrite: (path) => path.replace(/^\/api/, '') // 路径重写
        }
      }
    }
  }
})
